<template>
  <div style="padding: 32px 0; background: #fafafa; min-height: 100vh; max-width: 900px; margin: 0 auto;">
    <el-card>
      <div style="font-weight: bold; font-size: 18px; margin-bottom: 18px;">优惠券信息</div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" style="max-width: 600px;">
        <el-form-item label="*优惠券类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择优惠券类型" style="width: 100%;">
            <el-option label="全场赠券" value="全场赠券" />
            <el-option label="注册赠券" value="注册赠券" />
            <el-option label="购物赠券" value="购物赠券" />
          </el-select>
        </el-form-item>
        <el-form-item label="*优惠券名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入优惠券名称" />
        </el-form-item>
        <el-form-item label="*总发行量" prop="total">
          <el-input v-model="form.total" placeholder="只能输入正整数，0为不限制" />
        </el-form-item>
        <el-form-item label="*面额" prop="value">
          <el-input v-model="form.value" placeholder="面值只能是数值，0.01-10000，限2位小数" style="width: 200px;" />
          <span style="margin-left: 8px;">元</span>
        </el-form-item>
        <el-form-item label="*每人限领">
          <span>1张</span>
        </el-form-item>
        <el-form-item label="*使用门槛">
          <el-radio-group v-model="form.thresholdType">
            <el-radio label="无限制">无限制</el-radio>
            <el-radio label="满">满</el-radio>
          </el-radio-group>
          <el-input v-if="form.thresholdType === '满'" v-model="form.threshold" style="width: 100px; margin-left: 8px;" />
          <span v-if="form.thresholdType === '满'" style="margin-left: 4px;">元可用</span>
        </el-form-item>
        <el-form-item label="*使用时间" prop="time">
          <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="*备注">
          <el-input v-model="form.remark" placeholder="只能输入" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 24px;">
      <div style="font-weight: bold; font-size: 16px; margin-bottom: 12px;">可使用商品</div>
      <el-button :type="form.productType === '全部类' ? 'danger' : 'default'" @click="form.productType = '全部类'">全部类</el-button>
      <el-button :type="form.productType === '指定商品' ? 'danger' : 'default'" @click="form.productType = '指定商品'">指定商品</el-button>
      <el-button :type="form.productType === '指定分类' ? 'danger' : 'default'" @click="form.productType = '指定分类'">指定分类</el-button>
    </el-card>
    <div style="margin-top: 32px; text-align: right;">
      <el-button @click="handleBack">取消</el-button>
      <el-button type="danger" @click="handleSubmit">保存</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();
const form = ref({
  type: '',
  name: '',
  total: '',
  value: '',
  thresholdType: '无限制',
  threshold: '',
  time: [],
  remark: '',
  productType: '全部类'
});
const formRef = ref();
const rules = {
  type: [ { required: true, message: '请选择优惠券类型', trigger: 'change' } ],
  name: [ { required: true, message: '请输入优惠券名称', trigger: 'blur' } ],
  total: [ { required: true, message: '请输入总发行量', trigger: 'blur' } ],
  value: [ { required: true, message: '请输入面额', trigger: 'blur' } ],
  time: [ { required: true, message: '请选择使用时间', trigger: 'change' } ]
};
function handleSubmit() {
  formRef.value.validate().then(() => {
    ElMessage.success('保存成功（mock）');
    router.back();
  });
}
function handleBack() {
  router.back();
}
onMounted(() => {
  // 可根据 route.params.id 加载数据
  form.value.type = '全场赠券';
  form.value.name = '全品类优惠券';
  form.value.total = '10000';
  form.value.value = '100';
  form.value.thresholdType = '无限制';
  form.value.threshold = '';
  form.value.time = ['2017-07-31', '2017-08-19'];
  form.value.remark = '';
  form.value.productType = '全部类';
});
</script>

<style scoped>
.el-card {
  margin-bottom: 24px;
}
</style> 